How to Add an HTML Button that Acts Like a Link

There are several ways of creating an HTML button, that acts like a link (i.e., clicking on it the user is redirected to the specified URL). You can choose one of the following methods to add a link to the HTML button.

Add an inline onclick event

You can add an inline onclick event to the <button> tag.

This might not work if the button is inside a <form> element.

Example of adding an onclick event to the <button> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <button onclick="window.location.href='https://w3docs.com';">
      Click Here
    </button>
  </body>
</html>

It is also possible to add an inline onclick event to the <input> tag within the <form> element.

Example of adding an onclick event to the <input> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form>
      <input type="button" onclick="window.location.href='https://www.w3docs.com';" value="w3docs" />
    </form>
  </body>
</html>
The links won’t work when JavaScript is disabled, and search engines may ignore this kind of links.

Use the action or formaction attribute.

Another way of creating a button that acts like a link is using the action or formaction attribute within the <form> element.

<!DOCTYPE html>
<html>
   <head>
      <title>Title of the document</title>
   </head>
   <body>
      <form action="https://www.w3docs.com/">
         <button type="submit">Click me</button>
      </form>
   </body>
</html>

To open the link in a new tab, add target="_blank".

<!DOCTYPE html>
<html>
   <head>
      <title>Title of the document</title>
   </head>
   <body>
      <form action="https://www.w3docs.com/" method="get" target="_blank">
         <button type="submit">Click me</button>
      </form>
   </body>
</html>
Since there is no form and no data is submitted, this may be semantically incorrect. However, this markup is valid. 
<!DOCTYPE html>
<html>
   <head>
      <title>Title of the document</title>
   </head>
   <body>
      <form>
         <button type="submit" formaction="https://www.w3docs.com">Click me</button>
      </form>
   </body>
</html>
The formaction attribute is only used with buttons having type="submit". Since this attribute is HTML5-specific, its support in old browsers may be poor.

Add a link styled as a button with CSS properties. A href attribute is the required attribute of the <a> tag. It specifies a link on the web page or a place on the same page where the user navigates after clicking on the link. 

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .button {
        background-color: #1c87c9;
        border: none;
        color: white;
        padding: 20px 34px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 20px;
        margin: 4px 2px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <a href="https://www.w3docs.com/" class="button">Click Here</a>
  </body>
</html>
Since complex styling is required, this may not work on specific browsers.

Let's see one more example.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .button {
        display: inline-block;
        padding: 10px 20px;
        text-align: center;
        text-decoration: none;
        color: #ffffff;
        background-color: #7aa8b7;
        border-radius: 6px;
        outline: none;
        transition: 0.3s;
      }
      .button:hover {
        background-color: #c2c7c7;
      }
    </style>
  </head>
  <body>
    <a class="button" href="https://www.w3docs.com/learn-html/html-button-tag.html">HTML button tag</a>
  </body>
</html>

How about the accessibility?

Let's take accessibility into our account for the last example. Here are some improvements to make the code more accessible:

  1. Add a meaningful alt attribute to the image:

If the button contained an image, it would be important to provide an alt attribute to make the image accessible to screen readers. Since this button doesn't have an image, we don't need to worry about this.

  1. Add a label to the button:

Adding a label to the button will help users who rely on assistive technology understand the purpose of the button. We can do this by wrapping the button text in a <span> element and adding an aria-label attribute to the button.

  1. Increase contrast:

To improve visibility for users with low vision, we can increase the contrast between the text color and background color of the button. We can achieve this by making the background color darker or the text color lighter.

  1. Add focus styles:

Adding a focus style to the button will help users who navigate using the keyboard to see which element is currently focused. We can add a simple border to the button to achieve this.

Here's the updated code with these improvements:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .button {
        display: inline-block;
        padding: 10px 20px;
        text-align: center;
        text-decoration: none;
        color: #ffffff;
        background-color: #3c5d6e;
        border-radius: 6px;
        outline: none;
        transition: 0.3s;
        border: 2px solid transparent;
      }
      .button:hover,
      .button:focus {
        background-color: #c2c7c7;
        border-color: #7aa8b7;
      }
    </style>
  </head>
  <body>
    <a class="button" href="https://www.w3docs.com/learn-html/html-button-tag.html" aria-label="Learn about the HTML button tag"><span>HTML button tag</span></a>
  </body>
</html>